<template>
	<view class="quan" >
		<view class="quanInfo">
			<text class="couponMpoey">￥20 <text class="couponMpoeyInfo">满300减20</text></text>
			<text class="couponName">店铺优惠劵</text>
			<text class="couponTime">2019.8.1 00:00-2019.8.123:59</text>
		</view>
		<view class="receiveBtn">
			<view class="receive">使用</view>
		</view>
	</view>

</template>

<script>
</script>

<style>
		.quan{
			margin: 22rpx 37rpx;
			background-color: #FFF5F6;
			border-radius: 10rpx;
			display: flex;
			font-family: PingFang SC;
		}
		.quanInfo{
			background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
			border-right: 1px dashed #F64F51;
			padding: 30rpx 50rpx;
			width: 75%;
		}
		.couponMpoey{
			font-size: 30rpx;
			font-weight: 700;
			color: #ff3600;
			display: block;
		}
		.couponMpoeyInfo{
			font-size: 26rpx;
			padding-left: 10rpx;
		}
		.couponName{
			font-size: 24rpx;
			font-weight: 500;
			color: #797979;
			display: block;
		}
		.couponTime{
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #797979;
		}
		.receiveBtn{
			background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: rpx;
		}
		.receive{
			border-radius: 23rpx;
			background-color: #5FC484;
			padding: 7rpx 31rpx;
			text-align: center;
			margin-left: 36rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}

</style>